<script setup>
  import { useCommonStore } from '@/store/index'
  import ActiveNumber from '@/components/active-number/active-number.vue'
  import ItemBox from '@/components/item-box/item-box.vue'

  const commonStore = useCommonStore()
</script>

<template>
  <Item-Box title="碳标签" class="right-center">
    <div class="group">
      <div class="tag">
        <img src="/src/assets/img/tag.png" class="bk" />
        <img class="img" v-cover="commonStore.data[16]?.content" alt="" />
        <div class="title">
          碳足迹:
          <active-number :value="commonStore.data[17]?.content"></active-number>
          {{ commonStore.data[17]?.unit }}
        </div>
      </div>
      <div class="tag">
        <img src="/src/assets/img/tag.png" class="bk" />
        <img class="img" v-cover="commonStore.data[18]?.content" alt="" />
        <div class="title">{{ commonStore.data[19]?.content }}</div>
      </div>
    </div>
  </Item-Box>
</template>

<style lang="scss" scoped>
  .right-center {
    height: 233px;
  }

  .group {
    margin-top: 11px;
    display: flex;
    justify-content: center;
    align-items: center;

    .tag {
      position: relative;
      &:nth-child(1) {
        margin-right: 48px;
      }

      .bk {
        width: 152px;
        height: 131px;
      }
      .img {
        position: absolute;
        width: 120px;
        height: 100px;
        left: 16px;
        top: 16px;
        object-fit: scale-down;
      }

      .title {
        height: 28px;
        background: linear-gradient(
          270deg,
          rgba(18, 126, 225, 0) 0%,
          rgba(18, 126, 225, 0.6) 26%,
          rgba(18, 126, 225, 0.8) 51%,
          rgba(18, 126, 225, 0.6) 75%,
          rgba(18, 126, 225, 0) 100%
        );
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(
            270deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 0)
          )
          1 1;
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: 28px;
        text-align: center;
      }
    }
  }
</style>
